<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如何创建文本输入效果</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="typing-container">
        <span id="typed-text"></span>
        <span class="cursor">|</span>
    </div>
    <script>
        const textArray = ["Fantastic...","Hello,Words!","Welcome to the Typing Animation!","Enjoy Coding!"];
        const typingSpeed = 150;
        const delayBetweenTexts = 2000;
        let textIndex = 0;
        let charIndex = 0;

        const typedTextElement = document.getElementById('typed-text');

        function typeText(){
            if (charIndex < textArray[textIndex].length){
                typedTextElement.textContent += textArray[textIndex].charAt(charIndex);
                charIndex++;
                setTimeout(typeText, typingSpeed);
            } else {
                setTimeout(deleteText, delayBetweenTexts);
            }
        }
        function deleteText() {
            if (charIndex > 0){
                typedTextElement.textContent = textArray[textIndex].substring(0, charIndex - 1);
                charIndex--;
                setTimeout(deleteText, typingSpeed/2);
            } else {
                textIndex = (textIndex + 1) % textArray.length;
                setTimeout(typeText, typingSpeed);
            }
        }
        typeText()
    </script>
</body>
</html>